import React, { Component } from 'react';
import style from './index.css';
import { Card, Row, Col, Form, Select, Input, Button, Table, Pagination } from 'antd';
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';

import ModificationButton from './ModificationButton';

@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      total: 0,
      current: 0,
      form: {},
      provinceIdData: [],
      city_idData: [],
      district_idData: [],
    };
  }
  city_idChange = value => {
    this.setState(
      params => ({
        form: {
          ...params.form,
          cityCode: value,
        },
      }),
      () => {
        this.getCity({ level: 3, parentCode: value });
      }
    );
  };

  district_idChange = value => {
    this.setState(params => ({
      form: {
        ...params.form,
        districtCode: value,
      },
    }));
  };
  screeningYearChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        screeningYear: value,
      },
    }));
  };

  componentDidMount() {
    this.getDataByPage({});
    this.getCity({ level: 2, parentCode: '34' });
  }
  //查询省
  getCity = param => {
    this.execHttp('plannedFollowUp/getCity', { ...param }).then(resp => {
      if (resp) {
        if (param.level == 1) {
          this.setState({
            provinceIdData: resp.data,
          });
        } else if (param.level == 2) {
          this.setState({
            city_idData: resp.data,
          });
        } else if (param.level == 3) {
          this.setState({
            district_idData: resp.data,
          });
        }
      }
    });
  };

  //分页切换
  onChangePagination = pageNumber => {
    this.getDataByPage({
      user: this.props.currentUser.id,
      currentPage: pageNumber,
      pageSize: 10,
      ...this.state.form,
    });
  };
  //分页
  getDataByPage = params => {
    this.execHttp('summaryfAnnualReport/selList', {
      user: this.props.currentUser.id,
      currentPage: 1,
      pageSize: 10,
      ...params,
    }).then(resp => {
      if (resp.success) {
        this.setState({
          data: resp.data.list,
          total: resp.data.pagination.total,
          current: resp.data.pagination.current,
        });
      }
    });
  };
  //查询
  searchClick = () => {
    this.getDataByPage(this.state.form);
  };
  //重置
  resetClick = () => {
    this.setState(
      () => ({
        form: {},
      }),
      () => {
        this.getDataByPage(this.state.form);
      }
    );
  };

  render() {
    const columns = [
      {
        title: '省份',
        dataIndex: 'province_name',
        key: 'province_name',
      },
      {
        title: '城市',
        dataIndex: 'city_name',
        key: 'city_name',
      },
      {
        title: '区/县',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '上报机构',
        dataIndex: 'institution_name',
        key: 'institution_name',
      },
      {
        title: '筛查年度',
        dataIndex: 'screening_year',
        key: 'screening_year',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <div>
            <ModificationButton record={record}></ModificationButton>
          </div>
        ),
      },
    ];
    const { data, total, current } = this.state;
    return (
      <div>
        <Card size='small' style={{ width: '100%' }} bordered={true} title={'工作照片管理'}>
          <Form layout="horizontal">
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item>
                  <Select
                    value={this.state.form.cityCode}
                    onChange={this.city_idChange}
                    placeholder="请选择所属城市"
                  >
                    {this.state.city_idData.map(item => (
                      <Select.Option key={item.code}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item>
                  <Select
                    value={this.state.form.districtCode}
                    onChange={this.district_idChange}
                    placeholder="请选择所属区/县"
                  >
                    {this.state.district_idData.map(item => (
                      <Select.Option key={item.code}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} >
                <Form.Item>
                  <Input
                    placeholder="请输入筛查年度"
                    value={this.state.form.screeningYear}
                    onChange={this.screeningYearChange}
                  />
                </Form.Item>
              </Col>
              <Col span={6} style={{ textAlign: 'center' }}>
                <Button type="primary" onClick={this.searchClick}>
                  查询
                </Button>
                <Button onClick={this.resetClick} style={{ marginLeft: '10px' }}>
                  重置
                </Button>
              </Col>
            </Row>
          </Form>
          <Table columns={columns} dataSource={data} rowKey="id" pagination={false} 
            size="small"
            style={{marginTop:'20px'}}/>
          <div
            style={{
              marginTop: '20px',
              display: 'flex',
              flexDirection: 'row-reverse',
            }}
          >
            <Pagination
              showSizeChanger={true}
              showQuickJumper
              onChange={this.onChangePagination}
              defaultCurrent={1}
              total={total}
              showTotal={total => `总共 ${total} 条`}
            />
          </div>
        </Card>
      </div>
    );
  }
}
